'use client';

import { useEffect, useState } from 'react';
import { Trash2, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
import GlassCard from './GlassCard';

interface DeleteProgressProps {
  isOpen: boolean;
  onClose: () => void;
  documentTitle: string;
  stages: {
    vectors: 'pending' | 'processing' | 'success' | 'skipped';
    file: 'pending' | 'processing' | 'success' | 'error';
    database: 'pending' | 'processing' | 'success' | 'error';
  };
  message?: string;
}

export default function DeleteProgress({
  isOpen,
  onClose,
  documentTitle,
  stages,
  message
}: DeleteProgressProps) {
  if (!isOpen) return null;

  const allComplete = 
    (stages.vectors === 'success' || stages.vectors === 'skipped') &&
    stages.file === 'success' &&
    stages.database === 'success';

  const hasError = stages.file === 'error' || stages.database === 'error';

  const getStageIcon = (status: string) => {
    switch (status) {
      case 'processing':
        return <Loader2 className="h-5 w-5 animate-spin text-blue-500" />;
      case 'success':
        return <CheckCircle className="h-5 w-5 text-green-500" />;
      case 'skipped':
        return <CheckCircle className="h-5 w-5 text-gray-400" />;
      case 'error':
        return <AlertCircle className="h-5 w-5 text-red-500" />;
      default:
        return <div className="h-5 w-5 rounded-full border-2 border-gray-300" />;
    }
  };

  const getStageText = (status: string) => {
    switch (status) {
      case 'processing':
        return '处理中...';
      case 'success':
        return '完成';
      case 'skipped':
        return '跳过';
      case 'error':
        return '失败';
      default:
        return '等待中';
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <GlassCard className="w-full max-w-md p-6">
        <div className="text-center mb-6">
          <div className="mb-4 flex justify-center">
            {allComplete ? (
              <CheckCircle className="h-16 w-16 text-green-500" />
            ) : hasError ? (
              <AlertCircle className="h-16 w-16 text-red-500" />
            ) : (
              <div className="relative">
                <Trash2 className="h-16 w-16 text-red-500 animate-pulse" />
                <Loader2 className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-8 w-8 text-blue-500 animate-spin" />
              </div>
            )}
          </div>

          <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
            {allComplete ? '删除成功！' : hasError ? '删除失败' : '正在删除文档'}
          </h3>

          <p className="text-sm text-gray-600 dark:text-white/70 mb-4 line-clamp-2">
            {documentTitle}
          </p>
        </div>

        {/* 进度步骤 */}
        <div className="space-y-3 mb-6">
          {/* 向量数据 */}
          <div className="flex items-center gap-3 p-3 rounded-lg bg-white/40 dark:bg-white/5">
            {getStageIcon(stages.vectors)}
            <div className="flex-1">
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                清理向量数据
              </div>
              <div className="text-xs text-gray-500 dark:text-white/50">
                {getStageText(stages.vectors)}
              </div>
            </div>
          </div>

          {/* 文件 */}
          <div className="flex items-center gap-3 p-3 rounded-lg bg-white/40 dark:bg-white/5">
            {getStageIcon(stages.file)}
            <div className="flex-1">
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                删除原始文件
              </div>
              <div className="text-xs text-gray-500 dark:text-white/50">
                {getStageText(stages.file)}
              </div>
            </div>
          </div>

          {/* 数据库 */}
          <div className="flex items-center gap-3 p-3 rounded-lg bg-white/40 dark:bg-white/5">
            {getStageIcon(stages.database)}
            <div className="flex-1">
              <div className="text-sm font-medium text-gray-900 dark:text-white">
                删除数据库记录
              </div>
              <div className="text-xs text-gray-500 dark:text-white/50">
                {getStageText(stages.database)}
              </div>
            </div>
          </div>
        </div>

        {/* 消息提示 */}
        {message && (
          <div className="mb-4 p-3 rounded-lg bg-blue-50 dark:bg-blue-500/10">
            <p className="text-sm text-blue-700 dark:text-blue-300">{message}</p>
          </div>
        )}

        {/* 关闭按钮 */}
        {(allComplete || hasError) && (
          <button
            onClick={onClose}
            className="w-full px-6 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white rounded-lg transition-all shadow-lg hover:shadow-xl"
          >
            确定
          </button>
        )}
      </GlassCard>
    </div>
  );
}

